<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>媒体查询</title>
	</head>
	<body>
		<style type="text/css">
			/*媒体查询的写法*/
			.baba{
				width: 10rem;
				height: 10rem;
				background: black;
			}
			@media only screen and (max-width:900px ) {
				.baba{
					background: skyblue;
				}
			}
			@media only screen and (max-width:1200px ) {
				.baba{
					background: green;
				}
			}
			
			/*媒体查询的实质就是给css样式生效的条件进行进一步的限制*/
			/*@media only screen and (min-height:300px) and (max-width:1200px) {
				.baba{

				background: skyblue;
				}
			}*/
		</style>
		<!--当设备宽度为900px以下 bg:skyblue 
		< 1200px bg:green 
			普通时候	bg:black-->
		<div class="baba"></div>
	</body>
</html>
